<template>
  <div>
    <div class="userList">
      <el-table
        :data="userList"
        border
        style="width: 100%"
        ref="multipleTable"
        tooltip-effect="dark"
        stripe
        :header-cell-style="{ background: '#F0FAFF', color: '#787878' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        >
        </el-table-column>
        <el-table-column

          prop="_id"
          label="id"
          align="center"
        >
        </el-table-column>
        <el-table-column

          prop="username"
          label="用户名"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="token"
          label="token密钥"
          align="center"
        >
        </el-table-column>
        <el-table-column

          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="redact(scope.row)" size="small">编辑</el-button>
            <el-button type="warning" @click="redactPwd(scope.row)" size="small">重置密码</el-button>
            <el-button type="danger" size="small" @click="open(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        align="center">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="string" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ajax } from '@/config/user'

export default {
  name: 'userList',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
        return
      }
      callback()
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'))
        return
      }
      callback()
    }
    return {
      rules: {
        username: [
          {
            validator: validatePass,
            trigger: 'blur',
            required: true
          }
        ],
        password: [
          {
            validator: validatePass2,
            trigger: 'blur',
            required: true
          }
        ],
      },
      ruleForm: {
        username: '',
        password: '',
        _id: null,
      },
      dialogVisible: false,
      userList: null,
      getuser: {
        username: null,
        password: null,
        pageSize: 10,
        pageNum: 1,
        _id: null
      },
      multipleSelection: null,
    }
  },
  mounted () {
    this.getUser()
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.getredact(this.ruleForm).then(res => {
            var { data } = res
            if (data.code == 200) {
              this.$message.success(data.msg)
              this.dialogVisible = false
            }
          })

        } else {
          this.$message.error('服务器出错')
          return false
        }
      })
    },
    redactPwd(row){
      this.$alert('是否确定将密码重置', '密码重置', {
        confirmButtonText: '确定',
        callback: action => {
          this.ruleForm=row
          this.ruleForm.password=123456
          ajax.getredact(this.ruleForm).then(res => {
            var { data } = res
            if (data.code == 200) {
              this.$message.success('密码重置成功')
            }
          })
        }
      })
    },
    handleClick (row) {
      console.log(row)
    },
    redact (row) {
      this.dialogVisible = true
      this.ruleForm = row
    },
    getUser () {
      ajax.getUserList(this.getuser).then(res => {
        if (res.data.code == 200) {
          this.$message.success('查询成功')
          this.userList = res.data.data
          console.log(this.userList)
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(val)
    },
    open (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.ruleForm=row
        ajax.getdeleteUser(this.ruleForm).then(res => {
          var { code,msg } = res.data
          if (code == 200) {
            this.$message.success(msg)
            this.getUser()
            return
          }
          this.$message.error(msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
}
</script>

<style scoped lang="scss">
</style>
